<script>
export default {
  name: "MaterialPage",
  methods:{
    handelCurrentChange(current){
      this.refreshCurrentPageData(current)
      alert(`当前的页码是${current}`)
    },
    handelSizeChange(size){
      alert(`当前的尺寸是${size}`)

    },
    refreshCurrentPageData(current){
      this.materialDate2=[]
      for(let i = (current-1)*10;i<current*10;i++){
        this.materialDate2.push(this.materialDate[i])
      }
    },



  },
  created() {this.refreshCurrentPageData(1)
  },
  data(){
    return{
     materialDate:
         [
             {
               name: '手套',
               stock: 200,
               warningStock: 30,
               status: 1
             },
             {
               name: '口罩',
               stock: 500,
               warningStock: 50,
               status: 1
             },
             {
               name: '防护服',
               stock: 120,
               warningStock: 20,
               status: 2
             },
             {
               name: '护目镜',
               stock: 300,
               warningStock: 40,
               status: 1
             },
             {
               name: '消毒液',
               stock: 100,
               warningStock: 10,
               status: 2
             },
             {
               name: '温度计',
               stock: 80,
               warningStock: 15,
               status: 3
             },
             {
               name: '医用纱布',
               stock: 250,
               warningStock: 30,
               status: 1
             },
             {
               name: '绷带',
               stock: 180,
               warningStock: 25,
               status: 1
             },
             {
               name: '针管',
               stock: 600,
               warningStock: 50,
               status: 1
             },
             {
               name: '药品箱',
               stock: 90,
               warningStock: 20,
               status: 2
             },
             {
               name: '氧气瓶',
               stock: 40,
               warningStock: 10,
               status: 3
             },
             {
               name: '担架',
               stock: 15,
               warningStock: 5,
               status: 3
             },
             {
               name: '急救包',
               stock: 500,
               warningStock: 50,
               status: 1
             },
             {
               name: '口罩过滤器',
               stock: 150,
               warningStock: 20,
               status: 1
             },
             {
               name: '一次性手术刀',
               stock: 200,
               warningStock: 30,
               status: 1
             },
             {
               name: '手术衣',
               stock: 110,
               warningStock: 15,
               status: 2
             },
             {
               name: '血压计',
               stock: 85,
               warningStock: 10,
               status: 2
             },
             {
               name: '无菌手术巾',
               stock: 300,
               warningStock: 50,
               status: 1
             },
             {
               name: '外科口罩',
               stock: 700,
               warningStock: 100,
               status: 1
             },
             {
               name: '消毒湿巾',
               stock: 1200,
               warningStock: 200,
               status: 1
             }
           ],
     materialDate2:
         []


       }


    }
  }

</script>

<template>



  <el-card >
    <div slot="header">
      <span>物资列表页面</span>
    </div>
    <div>
      <el-table :data = "materialDate2" stripe border>

        <el-table-column label="物资名称" prop="name" width="200">
          <template v-slot="scope">
            <el-tag>
              {{scope.row.name}}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column label="物资库存数量" prop="stock" width="200"></el-table-column>
        <el-table-column label="物资库存预警值" prop="warningStock" width="200"></el-table-column>
        <el-table-column label="物资状态" prop="status" width="200"></el-table-column>
        <el-table-column label="操作" >
          <el-button type="primary" size="mini" plain icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini" plain icon="el-icon-delete"> 删除</el-button>
        </el-table-column>

      </el-table>
      <el-pagination  :total="materialDate.length"
                      @current-change="handelCurrentChange"
                      @size-change="handelSizeChange"
                      background
                      style="margin-top:10px"
                      layout ="sizes,prev,pager,next,jumper,total"/>

    </div>
  </el-card>





</template>

<style scoped>

</style>